<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学习</title>

    <style>
      #tutorial {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <canvas id="tutorial" width="300" height="300"></canvas>

    <script>

      function triangle() {
        let canvas = document.getElementById("tutorial");
        if (!canvas.getContext) return;
        let ctx = canvas.getContext("2d");
        ctx = canvas.getContext("2d");
        ctx.font = "30px sans-serif"
        ctx.fillText("天若有情", 10, 100);
        ctx.strokeText("天若有情", 10, 200)
      }
      triangle();

    </script>
  </body>
</html>
